<template>
	<div class="memberlist">
		<list-title :data="header"></list-title>
		<div class="instance">
			<template>
				<el-select v-model="appid" placeholder="请选择实例" @change='changeApp'>
					<el-option
					v-for="item in instanceList"
					:key="item.appid"
					:label="item.label"
					:value="item.appid">
					</el-option>
				</el-select>
			</template>
		</div>
		<list-table :list="memberList" :tableLoading="tableLoading" :footer="true" :pagination="pagination" :appid="appid">
			<template v-slot:data>
				<el-table-column label="名称(登录次数)" width='200' prop="" show-overflow-tooltip :render-header="icons">
					<template slot-scope="scope">
						<span :class='(scope.row.sex == 2)?"pink":""' :style='(scope.row.sex != 0)?"font-weight:bold":""'>
							{{(scope.row.nickname != '')?scope.row.nickname:scope.row.loginname}}
						</span>
						({{scope.row.logintimes}})
					</template>
				</el-table-column>
				<el-table-column label="手机/邮箱">
					<template slot-scope="scope">
						{{scope.row.phone}}<br/>{{scope.row.email}}
					</template>
				</el-table-column>
				<el-table-column label="当前积分/总积分">
					<template slot-scope="scope">
						{{scope.row.curr_integral}}/{{scope.row.cost_integral}}
					</template>
				</el-table-column>
				<el-table-column prop="url" label="最后登录IP/时间">
					<template slot-scope="scope">
						{{scope.row.lastloginip}}<br/>{{scope.row.lastlogin_time}}
					</template>
				</el-table-column>
				<el-table-column label="注册IP/时间">
					<template slot-scope="scope">
						{{scope.row.regip}}<br/>{{scope.row.add_time}}
					</template>
				</el-table-column>
				<!-- <el-table-column label="状态">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.display" @change="changeDisplay(scope.$index, scope.row)"></el-switch>
					</template>
				</el-table-column> -->
				<!-- <el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					</template>
				</el-table-column> -->
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"

export default {
	data() {
		return {
			/*头部数据*/
			header: {
				title: '会员列表',
				reload: true,
			},
			instanceList: [
				// {
				// 	appid: '111',
				// 	label: '东海期货'
				// },
				// {
				// 	appid: '222',
				// 	label: '东海证券'
				// }
			],
			appid: '',//当前选中的appid
			/*列表数据*/
			memberList: [
				// {
				// 	id: 1,
				// 	loginname: '',
				// 	nickname: '',
				// 	phone: '',
				// 	email: '',
				// 	headimgurl: '',
				// 	sex: 0,
				// 	curr_integral: 0,
				// 	cost_integral: 0,
				// 	lastloginip: '',
				// 	lastlogin_time: '',
				// 	state: 0,
				// 	logintimes: 0,
				// 	regip: '',
				// 	regfrom: '',
				// 	add_time: 0,
				// },
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 10
			},
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {
		/*获取列表数据*/
		this.getInstanceList()
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getMemberList()
		}
	},
	methods: {
		icons(h, {column}){
			const inReview = '加粗黑色代表男性、加粗粉色代表女性、其他代表保密'
			return h(
				'div', [
					h('span', column.label),
					h('el-tooltip', {
						props: {
							placement: 'bottom'
						}
					}, [
						h('div', {
							slot: 'content',
							style: {
								'width': '150px',
								'whiteSpace': 'normal',
								'margin-bottom': '10px',
								'line-height': '20px',
								'height': '30px',
							}
						}, inReview),
						h('i', {
							class: 'el-icon-info',
							style: 'margin-left:5px; font-size: 12px'
						})
					],)
				]
			)
		},
		/*获取实例列表*/
		getInstanceList: function(){
			if(this.$api.openList != undefined){
				this.$baseURL(this.$domain.ac)
				this.$get(this.$api.openList).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.appid = res.data.data[res.data.data.length-1].appid
							/*获取会员列表*/
							this.getMemberList()

							this.instanceList = []
							Object.keys(res.data.data).forEach((k) => {
								this.instanceList.push ({
									label: res.data.data[k].app_name,
									appid: res.data.data[k].appid,
								});
							})
						}
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}else{
				this.$message({
					showClose: true,
					message: '没有已开通实例列表的权限',
					type: 'error'
				});
			}
		},

		/*获取会员列表*/
		getMemberList: function(){
			// console.log(this.appid)
			if(this.$api.memberList != undefined){
				this.$baseURL(this.$domain.ac)
				let query = this.$route.query
				query.appid = this.appid
				this.$post(this.$api.memberList, query).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.memberList = []
							// console.log(res.data.data)
							Object.keys(res.data.data.list).forEach((k) => {
								this.memberList.push ({
									id: res.data.data.list[k].memberid,
									loginname: res.data.data.list[k].loginname,
									nickname: res.data.data.list[k].nickname,
									phone: res.data.data.list[k].phone,
									email: res.data.data.list[k].email,
									headimgurl: res.data.data.list[k].headimgurl,
									sex: res.data.data.list[k].sex,
									curr_integral: res.data.data.list[k].curr_integral,
									cost_integral: res.data.data.list[k].cost_integral,
									lastloginip: res.data.data.list[k].lastloginip,
									lastlogin_time: res.data.data.list[k].lastlogin_time,
									state: res.data.data.list[k].state,
									logintimes: res.data.data.list[k].logintimes,
									regip: res.data.data.list[k].regip,
									regfrom: res.data.data.list[k].regfrom,
									add_time: res.data.data.list[k].add_time,
								});
							})
							this.pagination = res.data.data.pageInfo
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		
		/*列表中直接修改 状态*/
		changeDisplay(index, row){
			if(this.$api.modifyPoster != undefined){
				/*请求后台*/
				this.$baseURL(this.$domain.ac)
				this.$post(this.$api.modifyPoster, {
					'appid': this.appid,
					'Poster': {
						'id': row.id,
						'display': row.display
					}
				}).then(res => {
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},

		/*重新选择应用*/
		changeApp: function(){
			/*获取列表数据*/
			this.getMemberList()
		}
	},
	computed: {
	
	}
};
</script>

<style lang="stylus" scoped>
.memberlist
	position: relative
	.instance
		position: absolute
		top: 0px
		left: 100px
		/deep/ .el-input__inner
			border: none !important
</style>